<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-08 14:55:13
 * @LastEditTime: 2020-04-23 19:33:39
 * @LastEditors: Please set LastEditors
 -->
 <style >
     #vmListTable2 .ivu-table-overflowX{
        overflow: auto;
    }
    .ivu-table-tip{
        overflow: hidden !important;
    }
    .operation .ivu-select-arrow{
        right: 2px
    }
    .operation .ivu-select-selection{
        border-radius: 0px 4px 4px 0px
    }
    .ivu-table-wrapper{
        overflow: visible !important
    }
    .ivu-tag-border.ivu-tag-closable .ivu-icon-ios-close{
        top: -2px;
    }
    .ivu-tag-border.ivu-tag-closable .ivu-icon-ios-close{
        margin-left: 8px !important
    }
    .addId{
        position: absolute !important;
    }
    .addId .ivu-select-dropdown{
        min-width: 87px !important;
    }
</style>
<style scoped>
    .headerBtn{
        text-align: left;
        margin: 10px 0;
        height: 32px;
        position: relative;
    }
    .pageStyle{
        text-align:right;
        position: relative;
        bottom: 32px;
    }
</style>
<template>
    <div>
        <div class="headerBtn">
            <Button type="primary" @click="createUserGroupPanel" style="position:relative;z-index:55"><Icon type="md-add-circle" :size="16" class="position_i"/>创建接入组</Button>
            <Page :total="userTotal"   show-sizer :current="userCurrentPage" :page-size="usreItemPage" :show-total= true   class-name="pageStyle" 
             @on-change="switchineUserCurrentPage" @on-page-size-change="switchUserItemPage" show-elevator/>
        </div>
        <Modal
            v-model="userGroupPanel"
            title="接入组"
            ok-text="确定"
            width=727
            :loading=userGroupLoading
            @on-ok="saveUserGroup"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input v-model="formValidate.name" placeholder="输入名称" clearable ></Input>
                </FormItem>
                <FormItem label="势力方" prop="party">
                    <Select filterable v-model="formValidate.party" ref="teamSelect" :disabled="teamDisabled" placeholder="势力方" @on-change="listentPartyChange">
                        <Option v-for="item in partyData" :value="String(item.id)" :key="item.id" :title="item.name">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="队长" prop="userId" v-if='!judgeAddOrAmend'>
                    <Select filterable v-model="formValidate.userId"  placeholder="队长">
                        <Option v-for="item in currUserList" :value="String(item.userId)" :key="item.id" :title="item.userName">{{item.userName}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="描述" prop="Desc" style="margin-top:10px">
                    <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述" clearable ></Input>
                </FormItem>
            </Form>
        </Modal>
        <!-- :height="tableHeight" -->
        <Table border ref="selection" :columns="userColumnsData" :data="userListData"  :stripe="true" :show-header="true"  id='vmListTable2'></Table>
        <!-- 接入用户穿梭框 -->
        <Modal
            v-model="userTransfer"
            title="接入用户"
            ok-canel ="取消"
            ok-text ="确定"
            :loading = "userTransferLoading"
            @on-cancel="cancel"
            @on-ok="accessUser"
            width=730>
            <Tag type="dot"  color="primary" >接入组：{{userGroupName}}</Tag>
            <Select filterable v-model="experimentUserGroupString" filterable  style="width:300px;float:right" clearable placeholder="请选择实验组"   @on-change="getExperimentGroupUser">
                <Option v-for="(item,index) in experimentUserGroupData" :key="index" :value="item.id" :title="item.name">{{item.name}}</Option>
            </Select>
            <Transfer
                id="scrollDiv"
                :data="userGroupData"
                :target-keys="userGroupDataTargetData"
                :selected-keys="userGroupDataTargetDataSelect"
                :render-format="rednerItemUserData"
                :operations="['删除','添加']"
                :list-style="listStyle"
                :filter-method="reachTextLabel"
                :titles="['用户','当前用户组已选']"
                :filterable="true"
                @on-change="listenChangeData"></Transfer>
        </Modal>
        <!-- 剔除面板 -->
        <Modal
            v-model="userTransferDelete"
            title="剔除用户"
            ok-canel ="关闭"
            ok-text ="剔除用户"
            :loading = "userTransferDeleteLoading"
            @on-cancel="cancel"
            @on-ok="deleteUser"
            width=730>
            <Tag type="dot"  color="primary" >接入组：{{userGroupName}}</Tag>
            <Transfer
                :data="accessUserGroup"
                :target-keys="userGroupDataTargetData"
                :selected-keys="userGroupDataTargetDataSelect"
                :operations="['删除','添加']"
                :filter-method="reachTextLabel"
                :list-style="listStyle"
                :titles="['已接入用户','剔除用户']"
                filterable
                @on-change="listenChangeData"></Transfer>
        </Modal>
        <!-- 查看邀请面板-->
        <!-- <Modal v-model="invitationPanel" width="800">
            <p slot="header" style="font-size:14px;text-align:left">
                <span>查看{{userGroupName}}组内申请人</span>
            </p>
            <div style="text-align:center">
                <div style="text-align:left;margin-bottom:10px">
                    <Poptip
                        confirm
                        :title="$t('agreeUserJoinGroup')"
                        @on-ok="agreeAdd"
                        @on-cancel="cancel"
                        :ok-text="$t('confirm')"
                        :cancel-text="$t('cancel')"
                        
                        >
                        <Button type="primary">{{$t('agree')}}</Button>
                    </Poptip>
                    <Poptip
                        confirm
                        :title="$t('disagreeUserJoinGroup')"
                        @on-ok="disAgreeAdd"
                        @on-cancel="cancel"
                        :ok-text="$t('confirm')"
                        :cancel-text="$t('cancel')">
                        <Button type="error" >{{$t('disagree')}}</Button>
                    </Poptip>
                    
                </div>
                <Table border ref="selection" :columns="invitationTabelClums" :data="invitationTableData"  :stripe="true" :show-header="true" @on-selection-change="invitationData"></Table>
            </div>
            <div slot="footer">
                <Button type="primary" @click="invitationPanel = false" >{{$t('close')}}</Button>
            </div>
        </Modal> -->
    </div>
</template>
<script>
    import axios from '@/libs/axios1'
    import VueClipboard from 'vue-clipboard2'
    import $ from "jquery";
    export default {
        name:'userGroup',
        data(){
            return{
                teamDisabled:false,
                currentProjectId:'',
                currentSceneId:'',
                userGroupPanel:false,
                userGroupLoading:true,
                judgeAddOrAmend:true,
                userTransfer:false,
                userTransferLoading:true,
                formValidate: {
                    name: '',
                    party:'',
                    desc: '',
                    userId:'',
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '请填写名字', trigger: 'change' }
                    ],
                    party: [
                        { required: true, message: '请选择势力方', trigger: 'change'},
                    ],
                    desc: [],
                    userId: [
                        { required: true, message: '请选择队长', trigger: 'change'},
                    ],
                },
                partyData:[],
                userColumnsData:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'left'
                    },
                    {
                        title:'接入组ID',
                        align:'left',
                        key:'id'
                    },
                    {
                        title:'名称',
                        key:'name',
                        align:'left'
                    },
                    {
                        title:'势力方颜色',
                        key:'',
                        align:'left',
                        render:(h,params)=>{
                            params = params.row;
                            return h('Span',{
                                style:{
                                    display:'inline-block',
                                    width:'60px',
                                    height:'18px',
                                    borderRadius:'5px',
                                    background:params.partyColor
                                }
                            },null)
                        }
                    },
                        {
                        title:'创建者',
                        key:'creatorName',
                        align:'left'
                    },
                    {
                        title:'创建时间',
                        key:'created',
                        align:'left'
                    },
                    {
                        title:'描述',
                        key:'description',
                        align:'left'
                    },
                    {
                        title:'队长',
                        key:'userName',
                        align:'left'
                    },
                    {
                        title:'接入用户',
                        key:'',
                        width:300,
                        align:'left',
                        render:(h,params)=>{
                            params = params.row;
                            let _this = this;
                            if(!params.userList){
                                return;
                            }
                            let groupUser = params.userList || [];
                            let _arr = []
                            if(groupUser.length!=0){
                                groupUser.map((item,key)=>{
                                    _arr.push(
                                        h('Poptip',{
                                            props:{
                                                confirm:true,
                                                title:'您确定要将此用户从组内剔除吗？',
                                                'v-model':'visible'
                                            },
                                            class:['ccccc'],
                                            on:{
                                                'on-ok':()=>{
                                                    _this.deleteUserFromGroup(item.userId,groupUser,params.id)
                                                },
                                                'on-cancel':()=>{
                                                    
                                                }
                                            }
                                        },[h('Tag',{
                                                props:{
                                                    color:"primary",
                                                    closable:true,
                                                    type:"border",
                                                    name:item.userId+','+params.id
                                                },
                                                on:{
                                                    'on-close':function(value,name){
                                                        $('.'+key+'-'+item.userId+'-'+params.id).click()
                                                        _this.userIdAndGroipId =name;
                                                    }
                                                }
                                            },[h('Icon',{
                                                props:{
                                                    type:'md-person'
                                                },
                                                style:{
                                                    fontSize:'16px',
                                                    position:'relative',
                                                    top:'-2px',
                                                    left:'-5px'
                                                }
                                        },''),item.userName]),h('Button',{style:{display:'none'},on:{click(){}},class:[key+'-'+item.userId+'-'+params.id]},'dddd')])
                                    )
                                })
                            }
                            return h('div',{style:{textAlign:'left'}},_arr)
                        }
                    },{
                        title:'操作',
                        key:'',
                        minWidth:120,
                        align:'left',
                        render:(h,params)=>{
                            let _this = this;
                            params = params.row;
                            $('.operation .ivu-select-placeholder').text("")
                            return h('div',{
                                class:['operation'],
                            },[h('Button',{
                                props:{
                                    type:'primary',
                                },
                                style:{
                                    borderRadius:'4px 0px 0px 4px'
                                },
                                on:{
                                    click(){
                                        _this.userTransfer =true;
                                        _this.scorllIndex = 0;
                                        _this.bolPost = true;
                                        _this.experimentUserGroupString = '';
                                        _this.userGroupName = params.name
                                        _this.userGroupDataTargetData = []//清空已选的数据
                                        _this.groupId = params.id;
                                        _this.promiseGroup = [];
                                        _this.userGroupData = [];
                                        _this.accessUserIds = params.userList.map((item)=>{
                                            return item.userId;
                                        });
                                        _this.reachExperimentGroup()
                                    }
                                }
                            },'接入用户'),h('Select',{
                                style:{
                                    width:'20px',
                                    borderRadius:'0px 4px 4px 0px'
                                },
                                props:{
                                    placeholder:'',
                                },
                                class:['_select addId'],
                                on:{
                                    'on-change':function(value){
                                        console.log(value)
                                        $('.empty').click()
                                        switch (value) {
                                            case 1:
                                                _this.deleteUserGroup(params.id)
                                                break;
                                            case 2:
                                                _this.updateUserGroupPanel(params)
                                                break;
                                            case 3:
                                                _this.applicationInvitationCode(params.id)
                                                _this.$Modal.confirm({
                                                    title:'邀请码',
                                                    okText:'复制邀请码',
                                                    onOk:()=>{
                                                        let code = document.getElementsByClassName('kkk')[0].children[0].children[1];
                                                        code.select();
                                                        document.execCommand("Copy");
                                                        _this.$Message.success("复制成功")
                                                    },
                                                    render: (h) => {
                                                        return h('div',{
                                                            class:['kkk'],
                                                            id:'ccc',
                                                            props:{
                                                                'data-clipboard-text':_this.applicationInvitationCodeText,
                                                            }
                                                        },[h('Input',{
                                                                props: {
                                                                value: _this.applicationInvitationCodeText,
                                                                readonly:true,
                                                                dataClipboardText:_this.applicationInvitationCodeText
                                                            },
                                                        })])
                                                    }
                                                })
                                                break;
                                            case 4:
                                                _this.userGroupName = params.name
                                                _this.invitationPanel = true;
                                                _this.groupId = params.id;
                                                let groupUser = _this.getUserByUserGrop(params.id);
                                                if(groupUser.length!=0){
                                                    _this.invitationTableData = groupUser.filter((item)=>{
                                                        return item.status==0
                                                    })
                                                }else{
                                                        _this.invitationTableData = [];
                                                }
                                                break;
                                            case 5:
                                                _this.userTransferDelete = true;
                                                _this.accessUserGroup = [];
                                                _this.userGroupDataTargetData = [];
                                                _this.groupId = params.id
                                                axios({
                                                    url:'process/accessGroups/'+ params.id  +'/assignUsers',
                                                }).then((response)=>{
                                                    if (response.code==1) {
                                                        if(response.data.length!=0){
                                                            _this.accessUserGroup = response.data.map((item)=>{
                                                                return {
                                                                    label:item.userName,
                                                                    key:item.userId
                                                                }
                                                            })
                                                        }
                                                    } else {
                                                        _this.accessUserIds = [];
                                                        _this.$Message.error(data.message)
                                                    }
                                                })
                                                break;
                                            default:
                                                break;
                                        }
                                    },
                                }
                            },[h('Option',{
                                class:['empty'],
                                props:{
                                    value:0
                                },
                                style:{
                                    height:0,
                                    width:'87px',
                                    display:'none'
                                }
                            },''),h('Option',{
                                props:{
                                    value:1
                                },
                                style:{
                                    width:'87px',
                                }
                            },'删除'),h('Option',{
                                props:{
                                    value:2
                                },
                                style:{
                                    width:'87px',
                                }
                            },'修改'),h('Option',{
                                props:{
                                    value:5
                                },
                                style:{
                                    width:'87px',
                                }
                            },'踢出人员')])])
                        }
                    },
                ],
                userListData:[],
                userTotal:0,
                userCurrentPage:1,
                usreItemPage:10,
                //接入用户穿梭框
                userGroupData:[],//总数据
                userGroupDataTargetData:[],//已选用户--右侧框中的数据,
                userGroupDataTargetDataSelect:[],
                listStyle: {
                    width: '300px',
                    height: '400px'
                },
                userGroupName:'',
                groupId:'',
                userGroup :[],
                groupId_:'',
                userIdAndGroipId:'',//从组内剔除使用
                applicationInvitationCodeText:'',//存放邀请码
                // tableHeight:200,
                userTransferDelete:false,
                userTransferDeleteLoading:true,
                accessUserGroup:[],
                invitationPanel:false,
                invitationTabelClums:[
                        {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户名',
                        key:'userName',
                        align:'center'
                    },
                    {
                        title: '邀请人',
                        key:'inviterName',
                        align:'center'
                    },
                    {
                        title:'操作',
                        key:'',
                        align:'center',
                        render:(h,params)=>{
                            let _this = this;
                            params = params.row;
                            return h('div',{},[
                                h('Button',{
                                    props:{
                                        type:'primary',
                                        size:'small'
                                    },
                                    style:{
                                        margin:'0px 5px'
                                    },
                                    on:{
                                        click(){
                                            _this.operationUserAgree(params.id,true)
                                        }
                                    }
                                },'同意'), h('Button',{
                                    props:{
                                        type:'error',
                                            size:'small'
                                    },
                                    style:{
                                        margin:'0px 5px'
                                    },
                                    on:{
                                        click(){
                                            _this.operationUserAgree(params.id,false)
                                        }
                                    }
                                },'拒接')
                            ])
                        }
                    }
                ],
                invitationTableData:[],
                invitationDataGroup:[],
                currentSceneId:'',
                experimentUserCurrentPage:1,
                experimentUserSizePage:100,
                scorllIndex:0,
                bolPost:true,
                reachExperimentName:'',
                reachSettimeout:'',
                partyColorForm:'',
                promiseGroup:[],
                accessUserIds:[],
                partyColorValue:{
                    r:'',
                    g:'',
                    b:'',
                },
                experimentUserGroupString:'',
                experimentUserGroupData:[],
                currentExperimentGroupName:'',
                currentAccessUserGroup:[],
                currentPartyName:'',
                // 当前接入组人员
                currUserList:[]
            }
        },
        // props: ['headerData','sceneId'],
        created(){
            this.currentProjectId = this.$route.query.projectId
            this.currentSceneId = this.$route.query.testId
            //用户组列表
            this.getUserGroupList();
            // this.tableHeight = $(window).height() - 50-10*2-32-120 -2
            // clearInterval(this.headerData.serintervalTimeFun)
        },
        mounted(){
            let self = this;
            $(".ivu-transfer-list-content").scroll(function(){
                self.loadMore();
            })
        },
        methods:{
            reachExperimentGroup(){
                axios({
                    url:'identity/experimenterGroups?pageIndex=1&pageSize=1000000&order=desc&sortBy=created',
                    params:{
                        name:this.reachExperimentName
                    }
                }).then((response)=>{
                    if (response.code==1) {
                        this.experimentUserGroupData = response.data.items;
                    } else {
                        this.$Message.error(response.message)
                    }
                })
            },
            getExperimentGroupUser(value){
                let _this = this;
                if(!value){
                    _this.userGroupData = [];
                    return;
                }
                axios({
                    url:'identity/experimenterGroups/'+value+'/users',
                }).then((response)=>{
                    if (response.code==1) {
                        _this.userGroupData = [];
                        if(response.data&&response.data.length!=0){
                            for (let index = 0; index < response.data.length; index++) {
                                const item = response.data[index];
                                _this.userGroupData.push({
                                    groupName:_this.currentExperimentGroupName,
                                    groupId:'',
                                    nickName:item.user.nickname,
                                    label:item.user.nickname,
                                    userName:item.user.username,
                                    userId:item.user.id,
                                    key:item.user.id,
                                    status:'',
                                    disabled:false
                                })
                                _this.userListData.map(listItem=>{
                                    listItem.userList.map(user=>{
                                        
                                        if(item.user.id == user.userId ){
                                            _this.userGroupDataTargetData.push(_this.userGroupData[index].userId);
                                        }
                                    })
                                    
                                });
                                
                            }
                        }
                    } else {
                        this.$Message.error(response.message)
                    }
                })
            },
            loadMore(){
                return;
                let _this = this;
                let scrollTop = $('#scrollDiv .ivu-transfer-list-content').eq(0).scrollTop();
                let height = $("#scrollDiv .ivu-transfer-list-content").height();
                let htmlHeight = (_this.scorllIndex+1)*35*100;
                if(scrollTop + height >= htmlHeight){
                    if(_this.bolPost){
                        _this.scorllIndex++;
                        axios({
                            url:'identity/company/users?',
                            params:{
                                pageIndex:_this.scorllIndex+1,
                                pageSize: this.experimentUserSizePage,
                                order:'asc',
                                sortBy:'created',
                                type:'experimenter',
                                username:_this.reachExperimentName
                            }
                        }).then((response)=>{
                            if (response.code==1) {
                                let dataGroup = response.data.items;
                                if((Math.ceil(response.data.count/100))==_this.scorllIndex){//判断是否已经到最后一页
                                    _this.bolPost = false;
                                }else{
                                    _this.bolPost = true;
                                }
                                for (let index = 0; index < dataGroup.length; index++) {
                                    const item = dataGroup[index];
                                    _this.userGroupData.push({
                                        groupName:'',
                                        groupId:'',
                                        nickName:item.nickname,
                                        label:item.nickname,
                                        userName:item.username,
                                        userId:item.id,
                                        key:item.id,
                                        status:'',
                                        disabled:false
                                    })
                                }
                            } else {
                                this.$Message.error(response.message)
                            }
                        })
                    }
                }
            },
            listentPartyChange(value){
                let _this = this;
                for (let index = 0; index < _this.partyData.length; index++) {
                    const element = _this.partyData[index];
                    if (element.id==value) {
                        this.partyColorValue.r = element.red
                        this.partyColorValue.g = element.green
                        this.partyColorValue.b = element.blue
                        this.currentPartyName = element.name;
                    }
                }
            },
            getUserExperiimentAllList(_params){
                let _this = this;
                _this.scorllIndex++;
                let obox = new Promise((reslove,reject)=>{
                    axios({
                        url:'identity/company/users?',
                        params:{
                            pageIndex:_this.scorllIndex,
                            pageSize: this.experimentUserSizePage,
                            order:'asc',
                            sortBy:'created',
                            type:'experimenter',
                        }
                    }).then((response)=>{
                        if (response.code==1) {
                            let dataGroup = response.data.items;
                            for (let index = 0; index < dataGroup.length; index++) {
                                const item = dataGroup[index];
                                _this.userGroupData.push({
                                    groupName:'',
                                    groupId:'',
                                    nickName:item.nickname,
                                    label:item.nickname,
                                    userName:item.username,
                                    userId:item.id,
                                    key:item.id,
                                    status:'',
                                    disabled:false
                                })
                            }
                            reslove(_this.userGroupData.length)
                            if((Math.ceil(response.data.count/100))==_this.scorllIndex){//判断是否已经到最后一页
                                _this.reachUserGroupOfUser(_params);
                            }else{
                                _this.getUserExperiimentAllList(_params)
                            }
                        } else {
                            _this.$Message.error(response.message)
                        }
                    })
                })
                this.promiseGroup.push(obox)
            },
            createUserGroupPanel(){
                this.getPartyList()
                this.userGroupPanel = true;
                this.$refs['formValidate'].resetFields()
                this.judgeAddOrAmend = true;
                this.formValidate.party = ''
                this.formValidate.name = ''
                this.formValidate.desc = ''
                this.teamDisabled = false
            },
            updateUserGroupPanel(params){
                let _this = this;
                _this.currUserList = params.userList
                this.getPartyList().then((value)=>{
                    _this.userGroupPanel = true;
                    _this.judgeAddOrAmend = false;
                    this.teamDisabled = true
                    _this.getGroupDetail(params.id)
                })
            },
            getGroupDetail(groupId){
                let _this = this;
                axios({
                    url:'process/accessGroups/'+groupId
                }).then(function(response){
                    if(response.code==1){
                        _this.formValidate.party = response.data.partyId;
                        _this.formValidate.name = response.data.name;
                        _this.formValidate.desc = response.data.description;
                        _this.formValidate.userId = response.data.userId;
                        _this.partyColorForm =  response.data.partyColor
                        _this.groupId =  response.data.id
                    }else{
                        _this.$Message.error(response.message)
                    }
                })
            },
            saveUserGroup(){
                let that = this;
                this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                        if(that.judgeAddOrAmend){//判断是保存还是修改
                            that.createUserGroup()
                        }else{//修改
                            that.updateUserGroup()
                        }
                    } else {
                        that.userGroupLoading = false;
                        this.$nextTick(() => {
                            that.userGroupLoading = true;
                        });
                    }
                });
            },
            cancel(){
                this.$refs['formValidate'].resetFields()
            },
            getPartyList(){
                let _this = this;
                _this.partyData = []
                return axios({
                    url: 'topo-edit/parties',
                    method: 'get',
                    params:{
                        projectId:this.currentProjectId,
                        enableUsed:'true'
                    }
                }).then(function(response){
                    if(response.code != '1'&&response.code != -2){
                        _this.$Message.error(response.message);
                    }else{
                        if(response.code==1){
                            return _this.partyData = response.attribute.dataList;
                        }
                    }
                },function(error){

                })
            },
            createUserGroup(){
                let _this = this
                axios({
                    url:'process/accessGroups',
                    method:'post',
                    data:{
                        "description": _this.formValidate.desc,
                        "name": _this.formValidate.name,
                        "partyColor": "rgb("+_this.partyColorValue.r+","+_this.partyColorValue.g+","+_this.partyColorValue.b+")",
                        "partyId": _this.formValidate.party,
                        "testId": _this.currentSceneId,
                        "partyName":_this.currentPartyName
                    }
                }).then(function(response){
                    if(response.code==1){
                        _this.$Message.success('添加成功');
                        _this.userGroupPanel = false;
                        $('.operation .ivu-select-placeholder').text("")
                        _this.getUserGroupList();
                        _this.userGroupLoading = false;
                        _this.$nextTick(() => {
                            _this.userGroupLoading = true;
                        });
                    }else{
                        _this.$Message.error(response.prompt);
                        _this.userGroupLoading = false;
                        _this.$nextTick(() => {
                            _this.userGroupLoading = true;
                        });
                    }
                })
            },
            updateUserGroup(){
                let _this = this
                axios({
                    url:'process/accessGroups/'+_this.groupId,
                    method:'put',
                    data:{
                        "description": _this.formValidate.desc,
                        "name": _this.formValidate.name,
                        "partyColor": _this.partyColorForm,
                        "partyId":_this.formValidate.party,
                        "testId": _this.currentSceneId,
                        "partyName":_this.currentPartyName,
                        'userId':_this.formValidate.userId,
                    }
                }).then(function(response){
                    if(response.code==1){
                        _this.$Message.success('修改成功');
                        _this.userGroupPanel = false;
                        $('.operation .ivu-select-placeholder').text("")
                        _this.getUserGroupList();
                        _this.userGroupLoading = false;
                        _this.$nextTick(() => {
                            _this.userGroupLoading = true;
                        });
                    }else{
                        _this.$Message.error(response.message);
                        _this.userGroupLoading = false;
                        _this.$nextTick(() => {
                            _this.userGroupLoading = true;
                        });
                    }
                })
            },
            getUserGroupList(){
                let _this = this;
                axios({
                    url:'process/accessGroups?',
                    type:'get',
                    params:{
                        testId:_this.currentSceneId,
                        pageIndex:_this.userCurrentPage,
                        pageSize:_this.usreItemPage,
                        order:"asc",
                        property:"name"
                    }
                }).then(function(response){
                    if(response.code==1){
                        _this.userTotal =  response.data.total;
                        _this.userListData = response.data.items;
                    }else{
                        if(response.code==-2){
                            _this.userListData = [];
                            _this.userTotal = 0;
                        }else{
                            _this.$Message.error(response.message)
                        }
                        
                    }
                })
            },
            rednerItemUserData(item){
                return `<span title="${item.label}">${item.label}</span>`
            },
            listenChangeData(targetKeys, direction, moveKeys){
                let _this = this;
                _this.userGroupDataTargetData = targetKeys;
            },
            switchineUserCurrentPage(currPage){
                this.userCurrentPage = currPage
                this.getUserGroupList()
            },
            switchUserItemPage(itemPage){
                this.usreItemPage = itemPage
                this.getUserGroupList()
            },
            experimentUserGroup(){
                let _this = this;
                let i = 0;
                _this.userGroupData = [];
                return new Promise((reslove,reject)=>{
                    axios({
                        url:'identity/company/users?',
                        params:{
                            pageIndex:this.experimentUserCurrentPage,
                            pageSize: this.experimentUserSizePage,
                            order:'asc',
                            sortBy:'created',
                            type:'experimenter'
                        }
                    }).then((response)=>{
                        _this.userGroupData = [];
                        if (response.code==1) {
                            let dataGroup = response.data.items;
                            _this.userGroupData = dataGroup.map((item)=>{
                                return {
                                    groupName:'',
                                    groupId:'',
                                    nickName:item.nickname,
                                    label:item.nickname,
                                    userName:item.username,
                                    userId:item.id,
                                    key:item.id,
                                    status:'',
                                    disabled:false
                                }
                            })
                            reslove(_this.userGroupData)
                        } else {
                            this.$Message.error(response.message)
                        }
                    })
                })
            },
            accessUser(){
                let _this = this;
                if(_this.userGroupDataTargetData.length!=0){
                    let c=_this.userGroupDataTargetData.concat(_this.accessUserIds);
                    axios({
                        url:'process/accessGroups/'+_this.groupId+'/assignUsers',
                        method:'put',
                        headers: {'content-type': 'application/json;charset=UTF-8'},
                        data:JSON.stringify(c),
                    }).then(function(response){
                        if(response.code==1){
                            _this.$Message.success("接入成功");
                            _this.userTransfer = false;
                            _this.getUserGroupList();
                            _this.userTransferLoading = false;
                            _this.$nextTick(() => {
                                _this.userTransferLoading = true;
                            });
                        }else{
                            _this.$Message.error(response.message)
                        }
                    })
                }else{
                    _this.$Message.info("请选择要接入的用户");
                    _this.userTransferLoading = false;
                    _this.$nextTick(() => {
                        _this.userTransferLoading = true;
                    });
                }
                
            },
            /**
             * @description: 接入时候回显使用
             * @param {type} 
             * @return: 
             */
            reachUserGroupOfUser(params){
                let _this = this;
                axios({
                    url:'process/accessGroups/'+ params.id  +'/assignUsers',
                }).then((response)=>{
                    if (response.code==1) {
                        if(response.data.length!=0){
                            response.data.forEach(element=>{
                                _this.accessUserIds.push(element.userId);
                                let index = _this.userGroupData.findIndex((v)=>{
                                    return element.userId ==v.userId;
                                })
                                if(index!=-1){
                                    _this.userGroupData[index].disabled = true;
                                }
                            })
                        }
                    } else {
                        _this.accessUserIds = [];
                        _this.$Message.error(data.message)
                    }
                })
            },
            deleteUserGroup(groupId){
                let _this = this;
                _this.$Modal.confirm({
                    title: '请选择',
                    content: '<p>您确定要删除该用户组吗？</p>',
                    onOk: () => {
                        axios({
                            url:'process/accessGroups/'+groupId,
                            method:'delete',
                        }).then(function(response){
                            if(response.code==1){
                                _this.getUserGroupList();
                            }else{
                                _this.$Message.error(response.prompt)
                            }
                        })
                    },
                    onCancel: () => {
                    }
                });
                
            },
            getUserByUserGrop(groupId){
                let _this = this;
                let arr = [];
                $.ajax({
                    url:_this.GLOBAL._projPath_vlan_ajax + 'project_access_members?accessGroupId='+groupId,
                    type:'get',
                    dataType: "json",
                    async:false,
                    contentType: "application/json",
                    headers:{"Authorization":localStorage.token},
                    success:(res)=>{
                        if(res.code == 1){
                            arr =  res.attribute.dataList
                        }else{
                            arr = [];
                        }
                    },
                    error:(err)=>{
                    }
                });
                return arr;
            },
            deleteUserFromGroup(userId,userIdGroup,groupId){
                let _this = this;
                let arr = [];
                for(let i=0;i<userIdGroup.length;i++){
                    if(userIdGroup[i].userId!=userId){
                        arr.push(userIdGroup[i].userId)
                    }
                }
                axios({
                    url:'process/accessGroups/'+groupId+'/assignUsers',
                    method:'put',
                    headers: {'content-type': 'application/json;charset=UTF-8'},
                    data:JSON.stringify(arr),
                }).then(function(response){
                    if(response.code==1){
                        _this.$Message.success("剔除成功")
                        _this.getUserGroupList();
                    }else{
                        _this.$Message.error(response.message)
                    }
                })
            },
            applicationInvitationCode(groupId){
                let _this = this;
                axios({
                    url:'topo-edit/projects/'+_this.currentSceneId+'/project_access_groups/'+groupId+'/invites',
                    method:'post'
                }).then(function(response){
                    if(response.code==1){
                        _this.applicationInvitationCodeText = response.attribute.invite
                    }else{
                        _this.$Message.error(response.prompt)
                    }
                })
            },
            async deleteUserFormGroup(){
                let _this = this;
                let arr = [];
                _this.accessUserGroup.forEach((element)=>{
                    if(_this.userGroupDataTargetData.indexOf(element.key)==-1){
                        arr.push(element.key)
                    }
                })
                await new Promise(resolve => {
                    axios({
                        url:'process/accessGroups/'+_this.groupId+'/assignUsers',
                        method:'put',
                        headers: {'content-type': 'application/json;charset=UTF-8'},
                        data:JSON.stringify(arr),
                    }).then(function(response){
                        if(response.code==1){
                            _this.userTransferDelete = false;
                            _this.$Message.success("剔除成功")
                            _this.getUserGroupList();
                            resolve();
                        }else{
                            _this.$Message.error(response.message)
                        }
                    })
                });
            },
            deleteUser(){
                let _this = this;
                if(_this.userGroupDataTargetData.length!=0){
                    _this.deleteUserFormGroup();
                }else{
                    _this.$Message.info("请选择要剔除的用户")
                }
                _this.userTransferDeleteLoading = false;
                _this.$nextTick(() => {
                    _this.userTransferDeleteLoading = true;
                });
            },
            operationUserAgree(userId,active){
                let _this = this;
                axios({
                    url:'topo-edit/projects/'+_this.currentSceneId+'/project_access_members/'+userId+'?enableAccept='+active,
                    method:'put'
                }).then(function(response){
                    if(response.code==1){
                        let groupUser = _this.getUserByUserGrop(_this.groupId);
                        _this.invitationTableData = []
                        if(groupUser.length!=0){
                            _this.invitationTableData = groupUser.filter((item)=>{
                                return item.status==0
                            })
                        }
                        _this.getUserGroupList();
                    }else{
                        _this.$Message.error(response.prompt)
                    }
                })
            },
            getUserGroupAddUser(){

            },
            invitationData(selection){
                this.invitationDataGroup = selection;
            },
            disAgreeAdd(){
                let _this = this;
                if(_this.invitationDataGroup.length!=0){
                    _this.invitationDataGroup.forEach((element)=>{
                        axios({
                            url:'topo-edit/projects/'+_this.currentSceneId+'/project_access_members/'+element.id+'?enableAccept=false',
                            method:'put'
                        }).then(function(response){
                            if(response.code==1){
                            }else{
                                _this.$Message.error(response.prompt)
                            }
                        })
                    });
                    setTimeout(() => {
                        let groupUser = _this.getUserByUserGrop(_this.groupId);
                        if(groupUser.length!=0){
                            _this.invitationTableData = groupUser.filter((item)=>{
                                return item.status==0;
                            })
                        }else{
                            _this.invitationTableData = [];
                        }
                        _this.getUserGroupList();
                    }, 1000);
                }else{
                    _this.$Message.info("请选择要拒绝的用户")
                }
            },
            agreeAdd(){
                let _this = this;
                if(_this.invitationDataGroup.length!=0){
                    _this.invitationDataGroup.forEach((element)=>{
                        axios({
                            url:'topo-edit/projects/'+_this.currentSceneId+'/project_access_members/'+element.id+'?enableAccept=true',
                            method:'put'
                        }).then(function(response){
                            if(response.code==1){
                            }else{
                                _this.$Message.error(response.prompt)
                            }
                        })
                    });
                    setTimeout(() => {
                        let groupUser = _this.getUserByUserGrop(_this.groupId);
                        if(groupUser.length!=0){
                            _this.invitationTableData = groupUser.filter((item)=>{
                                return item.status==0;
                            })
                        }else{
                            _this.invitationTableData = [];
                        }
                        _this.getUserGroupList();
                    }, 1000);
                }else{
                    _this.$Message.info("请选择要同意的用户")
                }
            },
            reachTextLabel(data,query){
                return  data.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
            },
        },
    }
</script>     
    